<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>二维码首页</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->

		<style>
	
		.w20{width:150px;}
		.hidden{opacity:0 }
			.pronumber,
			.qrnumber,
			.ordernumber {
				width: 200px;
				height: 140px;
				padding: 40px 10px;
			}
			
			.ordernumber {
				width: 500px;
				margin: 0 10px;
			}
			
			.page-container {
				padding: 15px 39px 0px 19px;
			}
			
			.pronumber .number .countdata,
			.qrnumber .number .countdata,
			.ordernumber .number .countdata {
				font-size: 34px;
				word-break: break-all;
			}
			
			.pronumber table,
			.qrnumber table,
			.ordernumber table {
				width: 100%;
			}
			.units{font-size:16px;}
			.pronumber table td,
			.qrnumber table td,
			.ordernumber table td {
				height: 60px;
				vertical-align: middle;
			}
			
			table td.numberIconTd {
				/*width: 43px;*/
			}
			
			.pronumber p,.pronumber span,
			.qrnumber p,.qrnumber span,
			.ordernumber p,.ordernumber span {
				color: #fff;
			}
			
			.numberIcon {
				width: 43px;
				height: 65px;
				background: url(images/Index/numberIcon.png) no-repeat;
				background-position: -60px 11px;
				display: inline-block;
				vertical-align: middle;
			}
			.more:hover{text-decoration: underline;}
			.ordernumber .numberIcon {
				background-position: -207px 11px;
				margin-left: 27px;
			}
			
			.qrnumber .numberIcon {
				background-position: -341px 11px;
				margin-left: 16px;
				margin-right: 15px;
			}
			
			.container_title {
				margin-top: 20px;
			}
			
			.container_title .title {
				border-bottom: 1px solid #ddd;
				height: 40px;
				line-height: 40px;
				padding-left: 10px;
				background: #eee;
				
			}
			
			.planorderPro {
				width: 63px;
				height: 63px;
				border: 1px solid #ddd;
			}
			
			.planOrderList ul {
				padding: 10px 3px;
				margin-top: -20px;
				width: 100%;
			}
			
			.planOrderList ul li {
				width: 442px;
				height: 121px;
				margin-top: 20px;
				float: left;
				border: 1px solid #ddd;
				padding-left: 10px;
				padding-top: 6px;
				padding-right: 10px;
				
				margin-left: 7px;
				margin-right:7px;
			}
			
			
			
			
			
			.planOrderList ul li table {
				margin-top: 20px;
			}
			
			.planOrderList ul li table td {
				vertical-align: bottom;
				position: relative;
			}
			
			.newestIcon {
				background: url(images/newest.png) no-repeat;
				width: 28px;
				height: 14px;
				display: inline-block;
				position: absolute;
				right: 0px;
				top: -7px;
			}
			
			.planOrderList ul li span,
			.planOrderList ul li p {
				color: #999;
			}
			
			.planOrderList ul li p.darkgrey {
				color: #666;
			}
			
			.planOrderList ul li span.colorblue {
				color: #17a3d7;
			}
			
			.planOrderList ul li table td img {
				margin-right: 12px;
			}
		</style>
	</head>

	<body>
		<script src="js/tpl/header.js" type="text/javascript" charset="utf-8"></script>
		 
		<div class="page-wrapper productlist minwidth border" id="page-wrapper">
			<div class="line"></div>
			
			<script src="js/tpl/yimaduosaoMenu.js" type="text/javascript" charset="utf-8"></script>
			
			<div class="page-content">
				<div class="tablist">
					<ul>
						<li class="tabItem">
							<a href="">游戏统计</a>
						</li>
						<li class="tabItem active">
							<a href="">红包统计</a>
						</li>
					</ul>
				</div>
				<div class="page-container">
					<div class="dataNumberContent over-hidden ">
						<div class="pronumber bgblue fl"  style="width:49%;padding-left:20px;">
							<table>
								<tr>
									<td class="numberIconTd" style="width:100px;">
										<i class="numberIcon"></i>
									</td>
									<td>
										<p class="number"><span class="countdata"></span><span class="units"></span></p>
										<p>累计中奖金额</p>
									</td>
								</tr>
							</table>
						</div>
						 
						<div class="qrnumber bgblue fl" style="width:49%;margin-left:2%;padding-left: 20px;">
							<table>
								<tr>
									<td class="numberIconTd" style="width:100px;">
										<i class="numberIcon"></i>
									</td>
									<td>
										<p class="number"><span class="countdata"></span><span class="units"></span></p>
										<p>发送失败金额</p>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="page-form">
						<div>
							<span class="btn fl" id="groupSubmit">批量重发</span>
						</div>
						<div class="clearfix"></div>

						<div class="form">
							<form class="inline-form" id="searchForm">
									<div>
										<label>关键字：</label>
										<input type="text" placeholder="请输入计划单名称" style="width: 140px;" />
									</div>

									<div> 
										<label style="line-height: 26px;">发送状态：</label>
										<div class="overlay">
											<!--这个是用来存放选中的select的值的-->
											<input type="hidden" value="" class="form-select-value" />
											<div class="dropdown">
												<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value" data-default="全部" >全部</span>
				                                <span class="caret"></span>
				                            </button>
												<ul class="none">
													<li data-value='001'>全部</li>
													<li data-value='002'>发送成功</li>
													<li data-value='003'>发送失败</li>
												</ul>
											</div>
										</div>
									</div>

									<div>
										<label>发送日期：</label>
										<input type="text" class="Wdate" onclick="WdatePicker()" />--<input type="text" class="Wdate" onclick="WdatePicker()" />
									</div>
									<input type="hidden" id="pageNo" value=""  />
						   			<input type="button" value="搜索" class="search-input-button" />
									<input type="button" value="重置" onclick="resetForm()" class="search-input-button bgblue" />
							</form>
						</div>
					</div>
					 
<div class="table">
						<div class="tablelist">
							<table>
								<thead>
									<tr>
										<th class="colspan" style="width:150px;">
											<div class="checkbox inline-block">
												<input type="checkbox" value="" class="label-input" id="checkAll" />
												<label for="checkAll" class="input-label"></label>
											</div>
											中奖用户
										</th>
										<th>活动名称</th>
										<th>中奖金额</th>
										<th>流水号</th>
										<th>发送时间</th>
										<th>发送状态</th>
										<th style="padding-right:20px;">操作</th>
									</tr>
								</thead>
								<tbody id="itemContainer">
									 
								</tbody>
							</table>
						</div>

						<div class="pagelist fr">
							<div class=" pagedesc fl">当前<span class="currentPage"></span>/<span class="totalpage"></span>，每页<span class="perpage"></span>条，共<span class="totalnumber"></span>条</div>
							<div class="pagination inline-block fl"></div>
							<div class="inline-block fl">
								到第<input type="text" value="" class="gotopage" />页 <input type="button" value="跳转" class="search-input-button border-radius bgblue gotopage_button"></span>
							</div>

						</div>

					</div>

					 
				</div>

			</div>
		</div>

		<div class="footer">
			<div class="footercontainer">
				<ul>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">服务与支持</a>
					</li>
					<li>
						<a href="#">常见问题</a>
					</li>
					<li>
						<a href="#">人才招聘</a>
					</li>
					<li>
						<a href="#">加盟合作</a>
					</li>
				</ul>

				<div style="margin-top:13px;">版权所有@ 2015 - 2016 深圳在乎传媒科技有限公司 粤ICP备15107022-1号</div>
			</div>

		</div>

	 

	</body>

	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
 	<script src="js/page/jPages.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/pageFun.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/wdatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layFun.js" type="text/javascript" charset="utf-8"></script>
	
	<script>
	 
        function count(number,obj){
        		var _self=obj;
        		var len=number.toString().length;
        		var intNum=parseInt(number);
        		if(len>4 && len<9){
        			intNum= (intNum/10000).toFixed(2);
        			$(_self).next('.units').html('万');
        		}else if(len>9 && len<13){
        			intNum=(intNum/100000000).toFixed(2);
        			$(_self).next('.units').html('亿');
        		}else if(len>=13){
        			intNum=(intNum/1000000000000).toFixed(2);
        			$(_self).next('.units').html('万亿');
        		}
        		$(_self).html(intNum);
        } 
		function formData(data){
			var html='';
			for(var i=0;i<data.length;i++){
				var temp=data[i];
				var statusStr=temp.send_status?'发送成功':'发送失败';
				html+="<tr>";
				html+='<td class="colspan w20">'+
				'<div class="checkbox inline-block fl" data-id="'+temp.id+'" style="position:relative;z-index:10;">'+
					'<input type="checkbox" value="" class="label-input" id="checkbox_'+temp.id+'" />'+
					'<label for="checkbox_'+temp.id+'" class="input-label"></label>'+
				'</div>'+
				'<span class="aa text-ellipsis inline-block fl" style="width:110px;" title="'+temp.username+'">'+temp.username+'</span>'+
				'</td><td class="w20"><p class="text-ellipsis w20"  title="'+temp.activityname+'">'+temp.activityname+'</p></td><td>'+temp.money+'</td><td class="w20"><p class="text-ellipsis w20" title="'+temp.liushuihao+'">'+temp.liushuihao+'</p></td><td>'+temp.send_time+'</td><td>'+statusStr+'</td><td  style="padding-right:20px;"><a href="#" onclick="detail('+temp.id+')">详情</a>';
				if(temp.send_status.toString()=='1'){
					html+='<a href="#" style="padding-left:10px;" onclick="resend('+temp.id+')">重发</a>';
				} 
				html+="</td></tr>";
			}
			return html;
		}
	    var countData=[12656455665,1265645566585];
        var data=[{
        	"id":0,
        	"username":"中奖用户0001",
        	"activityname":"中奖活动0001",
        	"money":"1.25元",
        	"activityname":"中奖活动0001",
        	'liushuihao':"20161207102612345678",
        	"send_time":"2016-12-19 12:13:14",
        	"send_status":'1',
        },{
        	"id":1,
        	"username":"中奖用户0002",
        	"activityname":"中奖活动0001",
        	"money":"1.25元",
        	"activityname":"中奖活动0001",
        	'liushuihao':"20161207102612345678",
        	"send_time":"2016-12-19 12:13:14",
        	"send_status":'1',
        },{
        	"id":2,
        	"username":"中奖用户0003",
        	"activityname":"中奖活动0001",
        	"money":"1.25元",
        	"activityname":"中奖活动0001",
        	'liushuihao':"20161207102612345678",
        	"send_time":"2016-12-19 12:13:14",
        	"send_status":'0',
        },{
        	"id":3,
        	"username":"中奖用户0005",
        	"activityname":"中奖活动0001",
        	"money":"1.25元",
        	"activityname":"中奖活动0001",
        	'liushuihao':"20161207102612345678",
        	"send_time":"2016-12-19 12:13:14",
        	"send_status":'0',
        },{
        	"id":4,
        	"username":"中奖用户0006",
        	"activityname":"中奖活动0001",
        	"money":"1.25元",
        	'liushuihao':"20161207102612345678",
        	"send_time":"2016-12-19 12:13:14",
        	"send_status":'0',
        }];
        
        
        var pageObj = new pageFun();
	    var currentpage = 1, perPage = 2, totalNumber=20,isRederingPage=false ;
	    //pageObj.pageNoObj = $('#pageNo');
	    pageObj.submitFun = function(page) {
	        isRederingPage=true;
	        getDataHtml(page, perPage);
	    }
	    
	    function searchForm(){
	        isRederingPage=false;
	        var html=getDataHtml(currentpage, perPage);
	        $("#itemContainer").html(html);
	        var checkAllobj = $("thead .checkbox input:checkbox");
			var checklistObj = $("tbody .checkbox input:checkbox");
			checkBoxFun(checkAllobj, checklistObj);
	    }

    //异步加载数据
    function getDataHtml(pageNo, pageSize) {
        var loading=layer.load(0,{'shade':[0.5,'#fff']});
            $.ajax({
                url: "json/hongbaoJson.json",
                dataType: "JSON",
                type: "GET",
                cache: false,
                success: function (data) {
                	var _html="";
                    if(data.length>0){
                        _html=formData(data);
                    }else{
                        _html='<tr><td colspan="7">无相关记录</td></tr>';
                    }
                    $("#itemContainer").html(_html);
                    var checkAllobj = $("thead .checkbox input:checkbox");
					var checklistObj = $("tbody .checkbox input:checkbox");
					checkBoxFun(checkAllobj, checklistObj);
                    layer.close(loading);
                  
                    if(!isRederingPage){
                        pageObj.init(perPage, currentpage, totalNumber, 'itemContainer');
                    }
                },
                error: function () {
                    isCallBack_getDataHtml = true;
                    layer.msg('加载列表数据错误');
                }
            })
    }
    
    function detail(id){
    	var html='<div class="infolist" style="color:#666;">   <div class="row"> <div class="row halfwidth fl"> <label>二维码ID：</label> <span>WWWWWWWWWWWWWWWWWW</span></div> <div class="row halfwidth fl"> <label>产品：</label> <span>白酒名字要长才好喝好卖</span> </div>  <div class="row halfwidth  fl"> <label>铺货单号：</label> <span>S20161207103644614</span> </div> <div class="row halfwidth  fl"> <label>中奖用户：</label> <span>中奖用户0002</span> </div> <div class="row halfwidth  fl"> <label>中奖活动：</label> <span>中奖活动0002</span> </div> <div class="row halfwidth fl"> <label>中奖时间：</label> <span>2016-12-19 12:13:15</span> </div>  <div class="row halfwidth  fl"> <label>中奖金额：</label> <span>2.36元</span> </div> <div class="row halfwidth  fl"> <label>流水号：</label> <span>S20161207103644614</span> </div> <div class="row halfwidth  fl"> <label>发送状态：</label> <span>发送成功</span> </div>   </div>  </div>';
    	layObj.content(800,600, '详情', html );
    }
    
    function resend(id){
    	var html='<div class="line"> <div class="prevline"></div> </div><p style="    text-align: center;margin-top: 80px;">发送成功</p>';
    	layObj.content(300, 180, false , html, 'notitleClass');
    }
		$(function() {
			selectObj.showChangeValue();
			var countdataObj=document.getElementsByClassName('countdata');
			for(var i=0;i<countData.length;i++){
				count(countData[i],countdataObj[i]);
			}
			formData(data);
			searchForm();
		});
		
		
	</script>

</html>